<template>
  <div>
    <el-table :data="tableData"
              show-summary
              v-loading="loading"
              style="width: 100%">
      <el-table-column align="center"
                       :label="tableTitle">
        <el-table-column prop="territory"
                         label="区域"
                         align="center">
        </el-table-column>
        <el-table-column align="center"
                         label="计划目标（W)">
          <el-table-column prop="summation"
                           label="区域目标"
                           align="center">
          </el-table-column>
          <el-table-column prop="responsibilityTarget"
                           label="小组跟进"
                           align="center">
          </el-table-column>
          <el-table-column prop="operationTarget"
                           label="运营主跟"
                           align="center">
          </el-table-column>
          <el-table-column prop="areaTarget"
                           label="大区跟进"
                           align="center">
          </el-table-column>
          <el-table-column prop="operation"
                           label="操作"
                           align="center">
            <template slot-scope="scope">
              <el-button type="text"
                         size="small"
                         @click.stop.prevent.native="openEditMonthDialog(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center"
                         label="实际完成（W)">
          <el-table-column prop="summationDone"
                           label="区域目标"
                           align="center">
          </el-table-column>
          <el-table-column prop="responsibilityDone"
                           label="小组跟进"
                           align="center">
            <template slot-scope="props">
              <popover-view :territory="props.row.territory"
                            :sign-type="'自签'"
                            :primary-territory="props.row.territory"
                            :plan-month="searchForm.planMonth"
                            :plan-year="searchForm.planYear">
                <a>{{ props.row.responsibilityDone }}</a>
              </popover-view>
            </template>
          </el-table-column>
          <el-table-column prop="operationDone"
                           label="运营主跟"
                           align="center">
            <template slot-scope="props">
              <popover-view :territory="props.row.territory"
                            :sign-type="'自签'"
                            :plan-month="searchForm.planMonth"
                            :primary-territory="'运营组'"
                            :plan-year="searchForm.planYear">
                <a>{{ props.row.operationDone }}</a>
              </popover-view>
            </template>
          </el-table-column>
          <el-table-column prop="areaDone"
                           label="大区跟进"
                           align="center">
            <template slot-scope="props">
              <popover-view :territory="props.row.territory"
                            :sign-type="'协签'"
                            :primary-territory="props.row.territory"
                            :plan-month="searchForm.planMonth"
                            :plan-year="searchForm.planYear">
                <a>{{ props.row.areaDone }}</a>
              </popover-view>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center"
                         label="实际率(100%)">
          <el-table-column label="目标"
                           align="center">
            <template slot-scope="props">
              <span>{{ props.row.summationPercentage + '%'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="小组"
                           align="center">
            <template slot-scope="props">
              <span>{{ props.row.responsibilityPercentage + '%'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="运营"
                           align="center">
            <template slot-scope="props">
              <span>{{ props.row.operationPercentage + '%'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="大区"
                           align="center">
            <template slot-scope="props">
              <span>{{ props.row.areaPercentage + '%'}}</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>
    <edit-month-dialog :dialog-visible="dialogVisible"
                       :detail-info="detailInfo"
                       :mode="1"
                       @close-dialog="onClose"></edit-month-dialog>
  </div>
</template>

<script>
import EditMonthDialog from './month-dialog'
import PopoverView from './popover-view-completed'
export default {
  name: 'AreaTable',
  props: {
    tableData: Array,
    tableTitle: String,
    activeName: String,
    searchForm: Object,
    loading: Boolean
  },
  data() {
    return {
      dialogVisible: false,
      detailInfo: {}
    }
  },
  methods: {
    openEditMonthDialog(row) {
      this.dialogVisible = true
      this.detailInfo = row
    },
    onClose() {
      this.dialogVisible = false
    }
  },
  components: {
    EditMonthDialog,
    PopoverView
  }
}
</script>
